// Profile Page Component
import { useAuth } from '../context/AuthContext';
import { useNavigate } from 'react-router-dom';
import { User, Shield, LogOut, Crown, Building2, Code, Users, Zap, Target } from 'lucide-react';

const ProfilePage = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  if (!user) {
    return <div>加载用户信息中...</div>;
  }

  const isVipValid = user.vipLevel > 0 && user.vipExpireTime && new Date(user.vipExpireTime) > new Date();

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  const handlePurchase = (planName: string) => {
    alert(`即将跳转到支付网关以购买/续费 ${planName}。`);
    // 在实际应用中，这里会处理支付逻辑
  };

  const handleEnterpriseContact = () => {
    // 跳转到首页的联系表单
    navigate('/#contact');
  };

  const pricingTiers = [
    {
      name: '月度会员',
      price: '¥29',
      period: '/月',
      features: ['所有高级功能', '每月100次AI生成', '数据每小时更新'],
    },
    {
      name: '年度会员',
      price: '¥299',
      period: '/年',
      features: ['所有高级功能', '无限次AI生成', '优先客服支持'],
    }
  ];

  const enterpriseServices = [
    {
      icon: <Code size={20} />,
      title: '定制开发',
      description: '根据您的具体需求，提供完全定制化的解决方案'
    },
    {
      icon: <Building2 size={20} />,
      title: '企业部署',
      description: '私有化部署，确保数据安全和业务连续性'
    },
    {
      icon: <Users size={20} />,
      title: '团队协作',
      description: '为团队提供协作工具和权限管理'
    },
    {
      icon: <Shield size={20} />,
      title: '安全合规',
      description: '符合行业标准的安全和合规要求'
    },
    {
      icon: <Zap size={20} />,
      title: '性能优化',
      description: '针对大规模数据的高性能解决方案'
    },
    {
      icon: <Target size={20} />,
      title: '专业咨询',
      description: '提供技术咨询和最佳实践指导'
    }
  ];

  return (
    <div className="profile-page">
      <div className="profile-container">
        <div className="profile-header">
          <h2>{user.username}</h2>
          <p>欢迎回来！</p>
        </div>

        <div className="profile-details card">
          <h3><User className="icon" /> 账户信息</h3>
          <div className="detail-item">
            <span>邮箱</span>
            <span>{user.email}</span>
          </div>
          <div className="detail-item">
            <span>会员等级</span>
            {isVipValid ? (
              <span className="vip-tag"><Crown size={14} /> VIP {user.vipLevel}</span>
            ) : (
              <span>普通用户</span>
            )}
          </div>
          <div className="detail-item">
            <span>会员状态</span>
            <span>
              {isVipValid
                ? `将于 ${new Date(user.vipExpireTime!).toLocaleString('zh-CN')} 到期`
                : user.vipExpireTime
                  ? '已过期'
                  : '未开通'}
            </span>
          </div>
        </div>

        <div className="profile-subscription card">
          <h3><Shield className="icon" /> 会员续费</h3>
          <div className="pricing-grid">
            {pricingTiers.map(tier => (
              <div key={tier.name} className={`pricing-card`}>
                <h4>{tier.name}</h4>
                <div className="price">{tier.price}<span className="period">{tier.period}</span></div>
                <ul>
                  {tier.features.map(feature => <li key={feature}>{feature}</li>)}
                </ul>
                <button onClick={() => handlePurchase(tier.name)}>
                  {isVipValid ? '续费' : '选择'}
                </button>
              </div>
            ))}
          </div>
        </div>

        <div className="profile-enterprise card">
          <h3><Building2 className="icon" /> 企业服务</h3>
          <p className="enterprise-intro">
            为企业和团队提供专业的定制化解决方案，满足您的独特业务需求
          </p>
          
          <div className="enterprise-services-grid">
            {enterpriseServices.map((service, index) => (
              <div key={index} className="enterprise-service-item">
                <div className="service-icon">
                  {service.icon}
                </div>
                <div className="service-info">
                  <h4>{service.title}</h4>
                  <p>{service.description}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="enterprise-cta">
            <button onClick={handleEnterpriseContact} className="btn btn-primary">
              咨询企业服务
            </button>
          </div>
        </div>
        
        <div className="profile-actions">
          <button onClick={handleLogout} className="logout-button">
            <LogOut size={16} /> 退出登录
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProfilePage; 